<template>
    <el-form-item>
      <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <h2 style="margin-left: 400px;">过程监控信息</h2>
    <table class="order-table">
      <tr>
        <th colspan="6" style="text-align: left;">基本信息</th>
      </tr>
      <tr>
        <td>产品名称：</td>
        <td><el-input v-model="form.productName" placeholder="请输入产品名称" /></td>
        <td>品牌：</td>
        <td><el-input v-model="form.brand" placeholder="请输入品牌" /></td>
        <td style="width: 100px;">材料名称：</td>
        <td><el-input v-model="form.materialName" placeholder="请输入材料名称" /></td>
      </tr>
      <tr>
        <td>包装规格：</td>
        <td><el-input v-model="form.packingSpecifications" placeholder="请输入包装规格" /></td>
        <td>包装日期：</td>
        <td>
          <el-date-picker v-model="form.packingDate" type="date" placeholder="Pick a date" style="width: 100%" />
        </td>
        <td>包装计划：</td>
        <td><el-input v-model="form.packingPlan" placeholder="请输入包装计划" /></td>
      </tr>
      <tr>
        <td>包装人员：</td>
        <td>
          <el-select v-model="form.packers" placeholder="请选择交班班长">
            <el-option label="秦卓珈" value="秦卓珈" />
            <el-option label="韩一芳" value="韩一芳" />
            <el-option label="刘志宝" value="刘志宝" />
            <el-option label="申莹洋" value="申莹洋" />
            <el-option label="周岚青" value="周岚青" />
            <el-option label="徐如华" value="徐如华" />
            <el-option label="张淑馨" value="张淑馨" />
            <el-option label="郭银汝" value="郭银汝" />
            <el-option label="屈语盼" value="屈语盼" />
            <el-option label="柳泳辉" value="柳泳辉" />
          </el-select>
        </td>
        <td>质检人员：</td>
        <td>
          <el-select v-model="form.qualityInspectors" placeholder="请选择接班班长">
            <el-option label="陶颢瑶" value="陶颢瑶" />
            <el-option label="孟轩" value="孟轩" />
            <el-option label="甄茹语" value="甄茹语" />
            <el-option label="尹兆雨" value="尹兆雨" />
            <el-option label="张隆铭" value="张隆铭" />
            <el-option label="王思凯" value="王思凯" />
            <el-option label="周思绒" value="周思绒" />
            <el-option label="孟辰" value="孟辰" />
            <el-option label="方天奇" value="方天奇" />
            <el-option label="杨金龙" value="杨金龙" />
          </el-select>
        </td>
        <td>设备：</td>
        <td>
          <el-select v-model="form.id" placeholder="请选择设备">
            <el-option label="扎啤机 " :value="1" />
            <el-option label="鲜啤机" :value="2" />
            <el-option label="苦啤机" :value="3" />
            <el-option label="普啤机" :value="4" />
            <el-option label="黑啤机" :value="5" />
            <el-option label="奶啤机" :value="6" />
          </el-select>
        </td>
      </tr>
      <tr>
        <td style="width: 130px;">外观检验结果：</td>
        <td><el-input v-model="form.testResults" placeholder="请输入外观检验结果" /></td>
        <td>喷码/压码效果：</td>
        <td><el-input v-model="form.inkjetEffect" placeholder="请输入喷码/压码效果" /></td>
        <td>密封性：</td>
        <td><el-input v-model="form.tightness" placeholder="请输入密封性" /></td>
      </tr>
      <tr>
        <td>操作合规性：</td>
        <td><el-input v-model="form.compliance" placeholder="请输入操作合规性" /></td>
        <td style="width: 160px;">异常原因分析结果：</td>
        <td colspan="3"><el-input v-model="form.abnormal" type="textarea" placeholder="请输入异常原因分析结果" /></td>
      </tr>
      <tr>
        <td>审核日期：</td>
        <td>
          <el-date-picker v-model="form.auditDate" type="date" placeholder="Pick a date" style="width: 100%" disabled />
        </td>
        <td>审核人：</td>
        <td><el-input v-model="form.reviewers" placeholder="请输入异常原因分析结果" disabled /></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref, computed, onMounted } from 'vue'
  import dayjs from 'dayjs'
  import { useCounterStore } from "@/stores/counter";
  import { ElMessage } from 'element-plus'
  import { useRouter, useRoute } from 'vue-router'
  import axios from 'axios'
  import {read,write} from '@/axios/axiosHelper'
  
  const router = useRouter()
  const route = useRoute()
  
  const store = useCounterStore();
  
  const form = reactive({
    monitorId:route.query.monitorId,
    productName: '',
    brand: '',
    materialName: '',
    packingSpecifications: '',
    packingDate: '',
    packingPlan: '',
    packers: '',
    qualityInspectors: '',
    id: '',
    testResults: '',
    inkjetEffect: '',
    tightness: '',
    compliance: '',
    abnormal: '',
    reviewers: store.counterStore.userName,
    auditDate: ''
  });

  onMounted(()=>{
    Fan();
  })

  const Fan=()=>{
    read.get("p2-read/api/Monitor/ShowMonitor",{
      params:{
        monitorId:route.query.monitorId
      }
    })
    .then(res=>{
    form.productName = res.data.data[0].productName;
    form.brand = res.data.data[0].brand;
    form.materialName = res.data.data[0].materialName;
    form.packingSpecifications = res.data.data[0].packingSpecifications;
    form.packingDate = res.data.data[0].packingDate;
    form.packingPlan = res.data.data[0].packingPlan;
    form.packers = res.data.data[0].packers;
    form.qualityInspectors = res.data.data[0].qualityInspectors;
    form.id = res.data.data[0].id;
    form.testResults = res.data.data[0].testResults;
    form.inkjetEffect = res.data.data[0].inkjetEffect;
    form.tightness = res.data.data[0].tightness;
    form.compliance = res.data.data[0].compliance;
    form.abnormal = res.data.data[0].abnormal;
    form.reviewers = res.data.data[0].reviewers;
    form.auditDate = res.data.data[0].auditDate;
    })
  }
  
  // 获取当前日期并赋值给审核日期
  form.auditDate = dayjs().format('YYYY-MM-DD');
  
  const onSubmit = () => {
    write.post("p2-write/api/Monitor/UpdMonitor", form)
      .then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          router.push('/QueryMonitor')
        }
        else {
          ElMessage.error(res.data.msg);
          return;
        }
      })
  }
  
  </script>
  
  <style scoped>
  .order-table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .order-table th,
  .order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  
  .order-table th {
    background-color: #f2f2f2;
  }
  </style>
  
  <style scoped>
  #app {
    padding: 20px;
  }
  </style>